<template>
  <div class="materialConfig-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="900px"
    >
      <div style="padding-right: 50px; padding-top: 20px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="140"
        >
          <div class="form-item">
            <el-form-item label="物料编号" prop="number">
              <el-input
                placeholder="请输入物料编号"
                v-model="modelValue.form.number"
                autocomplete="off"
                style="width: 240px"
                maxlength="64"
                show-word-limit
                :disabled="!!modelValue.form.id"
              />
            </el-form-item>
            <el-form-item label="外部物料编号" prop="outNumber">
              <el-input
                placeholder="请输入外部物料编号"
                v-model="modelValue.form.outNumber"
                autocomplete="off"
                style="width: 240px"
                maxlength="64"
                show-word-limit
              />
            </el-form-item>
          </div>

          <div class="form-item">
            <el-form-item label="物料名称" prop="name">
              <el-input
                placeholder="请输入物料名称"
                v-model="modelValue.form.name"
                autocomplete="off"
                style="width: 240px"
                maxlength="64"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="物料类型" prop="materialTypeId">
              <el-select
                style="width: 240px"
                v-model="modelValue.form.materialTypeId"
                placeholder="选择物料类型"
              >
                <el-option
                  v-for="option in modelValue.materialCategoryList"
                  :key="option.id"
                  :label="option.materialTypeName"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
          </div>

          <div class="form-item" style="align-items: flex-start">
            <el-form-item label="物料单位" prop="unitId">
              <el-select
                style="width: 240px"
                v-model="modelValue.form.unitId"
                placeholder="选择物料类型"
              >
                <el-option
                  v-for="option in modelValue.materialUnitList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="物料转换系数"
              prop="materialConversionCoefficient"
            >
              <el-input
                placeholder="请输入物料转换系数"
                v-model="modelValue.form.materialConversionCoefficient"
                autocomplete="off"
                style="width: 240px"
              />
              <div style="font-size: 12px; color: #ff6600">
                提示:克与毫升的换算关系是：克=毫升*系数
              </div>
            </el-form-item>
          </div>

          <div class="form-item">
            <el-form-item label="常温保质期" prop="expirationDate">
              <el-input-number
                v-model="modelValue.form.expirationDate"
                :min="1"
                :max="1024"
              />
              <span style="margin-left: 6px">小时</span>
            </el-form-item>
            <el-form-item label="冷藏保质期" prop="freezeExpirationDate">
              <el-input-number
                v-model="modelValue.form.freezeExpirationDate"
                :min="1"
                :max="1024"
              />
              <span style="margin-left: 6px">小时</span>
            </el-form-item>
          </div>

          <div class="form-item">
            <el-form-item label="清洗周期" prop="disinfectCycle">
              <el-input-number
                v-model="modelValue.form.disinfectCycle"
                :min="1"
                :max="1024"
              /><span style="margin-left: 6px">小时</span>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="&nbsp;" prop="disinfectCycle">
              <el-button @click="changeShowAdvanceStatus" type="primary"
                >高级设置</el-button
              >
            </el-form-item>
          </div>

          <div v-if="isShowAdvance">
            <div class="form-item">
              <el-form-item label="强制报废" prop="forceThrow">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.forceThrow"
                  placeholder="选择强制报废"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="强制清洗" prop="forceDisinfect">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.forceDisinfect"
                  placeholder="选择强制清洗"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-item">
              <el-form-item
                label="始终单独出料"
                prop="alwaysDischargeSeparately"
              >
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.alwaysDischargeSeparately"
                  placeholder="选择始终单独出料"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="强制扫码补料" prop="forcedScanning">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.forcedScanning"
                  placeholder="选择强制扫码补料"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-item">
              <el-form-item label="为性状易受影响物料" prop="sticky">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.sticky"
                  placeholder="选择性状易受影响物料"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="启用" prop="enabled">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.enabled"
                  placeholder="选择是否启用"
                >
                  <el-option
                    v-for="option in statusOptions"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-item">
              <el-form-item label="1份物料" prop="portion">
                <el-input-number
                  v-model="modelValue.form.portion"
                  :min="1"
                  :max="720"
                />
                <span style="margin-left: 6px">g</span>
              </el-form-item>
              <el-form-item label="是否支持萃取" prop="extracted">
                <el-select
                  style="width: 240px"
                  v-model="modelValue.form.extracted"
                  placeholder="选择性状易受影响物料"
                >
                  <el-option
                    v-for="option in statusList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入备注内容"
              v-model="modelValue.form.remark"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addMaterialConfig,
  updateMaterialConfig,
} from '@/api/fms-material-config.api'
import { statusOptions } from '@/utils/common.utils'
const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()
const isShowAdvance = ref(false)
const statusList = [
  {
    id: 1,
    name: '是',
  },
  {
    id: 2,
    name: '否',
  },
]
const changeShowAdvanceStatus = () => {
  isShowAdvance.value = !isShowAdvance.value
}
/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    number: form.number,
    name: form.name,
    unitId: form.unitId,
    sticky: form.sticky,
    disinfectCycle: form.disinfectCycle,
    forceThrow: form.forceThrow,
    forceDisinfect: form.forceDisinfect,
    liquidityCoefficient: form.liquidityCoefficient,
    materialTypeId: form.materialTypeId,
    unitName: form.unitName,
    materialTypeName: form.materialTypeName,
    relationCount: form.relationCount,
    enabled: form.enabled,
    expirationDate: form.expirationDate,
    freezeExpirationDate: form.freezeExpirationDate,
    srcMaterialId: form.srcMaterialId,
    alwaysDischargeSeparately: form.alwaysDischargeSeparately,
    forcedScanning: form.forcedScanning,
    materialConversionCoefficient: form.materialConversionCoefficient,
    portion: form.portion,
    extracted: form.extracted,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateMaterialConfig({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addMaterialConfig(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped>
.form-item {
  display: flex;
  align-items: center;
  .el-form-item {
    flex: 1;
  }
}
</style>
